<template>
  <div>
    <div>{{ person }}</div>
    <button @click="person.name = '好人'">偷偷改名</button>
    <button @click="person.age = 80">偷偷改年纪</button>
    <button @click="person.hobby.name = '前端'">弃恶从善</button>
  </div>
</template>

<script>
export default {
  //该vue组件的数据源
  data() {
    return {
      // 24小时，全方位，100% 监控
      person: {
        name: '嫌疑犯',
        age: 22,
        desc: '喜欢蹦迪~ 踩点~',
        hobby: {
          name: '测试',
        },
      },
    }
  },

  //监听
  watch: {
    // 完整写法
    // person: {
    //   //发生改变以后会触发的函数
    //   handler(newValue, oldValue) {
    //     // console.log('我变了')
    //     console.log(newValue, oldValue)
    //   },
    //   //深度监听
    //   deep: true,
    //   //立即监听 渲染完成立即触发一次handler函数
    //   immediate: true,
    // },

    'person.name'(newValue) {
      console.log('名字变了' + newValue)
    },
    'person.age'(newValue) {
      console.log('年龄变了' + newValue)
    },
    'person.hobby.name'(newValue) {
      console.log('爱好变了' + newValue)
    },
  },
}
</script>

<style scoped></style>
